<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 三大标签（title decription keyword）SEO优化 -->
    <title>品优购商城-综合网购首选-正品低价，品质保证，配送及时</title>
    <meta name="description" content="品优购商城-专业的综合网上购物商城，销售家电，数码通讯，
    提供预约的上网购物体验" />
    <meta name="keywords" content="网上购物，网上商城，手机，笔记本，电脑" />
    <link rel="stylesheet" href="css/common.css">
    <link rel="shortcut icon" href=" logo.ico" />
    <link rel="stylesheet" href="css/base.css">
</head>

<body>
    <!-- 头部导航模块 -->
    <section class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>品优购欢迎您！&nbsp</li>
                    <li>
                        <a href="#">请登录&nbsp</a><a href="#" class="style-red">免费注册</a>
                    </li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li><a href="#">我的订单</a></li>
                    <li></li>
                    <li class="arrow"><a href="#">我的品优购</a></li>
                    <li></li>
                    <li><a href="#">品优购会员</a></li>
                    <li></li>
                    <li><a href="#">企业采购</a></li>
                    <li></li>
                    <li class="arrow"><a href="#">关注品优购</a></li>
                    <li></li>
                    <li class="arrow"><a href="#">客户服务</a></li>
                    <li></li>
                    <li class="arrow"><a href="#">网站导航</a></li>
                </ul>
            </div>
        </div>
    </section>


    <!-- header头部制作 -->
    <header class="header w"><!-- w版心格式 -->

        <!-- logo SEO优化 h1里面+a链接（a里面设title放网站名称）返回首页+logo提示文字 -->
        <div class="logo">
            <h1>
                <a href="index.html" title="品优购商城">品优购商城</a>
                <!-- 背景图给链接 ，所以链接和logo一样大-->
            </h1>
        </div>

        <div class="search">
            <input type="search" placeholder="语言开发">
            <button>搜索</button>
        </div>

        <div class="hotwords">
            <a href="#" class="style_red">优惠购首发</a>
            <a href="#">亿元优惠</a>
            <a href="#">9.9元团购</a>
            <a href="#">美满99减30</a>
            <a href="#">办公用品</a>
            <a href="#">电脑</a>
            <a href="#">通信</a>
        </div>

        <div class="shopcar">
            我的购物车
            <i class="count">8</i>
            <!-- i可以直接设置高宽 -->
        </div>
    </header>



    <!-- nav导航制作 -->
    <nav class="nav w">
        <div class="dropdown">
            <h1>全部商品分类</h1>
            <ul>
                <li><a href="#">家用电器</a> </li>
                <li><a href="list.html">手机</a>、 <a href="#">数码</a>、<a href="#">通信</a> </li>
                <li><a href="#">电脑、办公</a> </li>
                <li><a href="#">家居、家具、家装、厨具</a> </li>
                <li><a href="#">男装、女装、童装、内衣</a> </li>
                <li><a href="#">个户化妆、清洁用品、宠物</a> </li>
                <li><a href="#">鞋靴、箱包、珠宝、奢侈品</a> </li>
                <li><a href="#">运动户外、钟表</a> </li>
                <li><a href="#">汽车、汽车用品</a> </li>
                <li><a href="#">母婴、玩具乐器</a> </li>
                <li><a href="#">食品、酒类、生鲜、特产</a> </li>
                <li><a href="#">医药保健</a> </li>
                <li><a href="#">图书、音像、电子书</a> </li>
                <li><a href="#">彩票、旅行、充值、票务</a> </li>
                <li><a href="#">理财、众筹、白条、保险</a> </li>
            </ul>

        </div>


        <div class="navitems">
            <ul>
                <li><a href="#">服装城</a></li>
                <li><a href="#">美妆馆</a></li>
                <li><a href="#">传智超市</a></li>
                <li><a href="#">全球购</a></li>
                <li><a href="#">闪购</a></li>
                <li><a href="#">团购</a></li>
                <li><a href="#">拍卖</a></li>
                <li><a href="#">有趣</a></li>
            </ul>
        </div>
    </nav>



    <!-- 首页专有的模块 main -->
    <div class="main w">
        <div class="focus">
            <!-- 因为后续可能添加图片，所以应该用ul加li -->
            <img src="upload/focus1.png" alt="">
        </div>


        <div class="newsflash">

        </div>
    </div>
</body>

</html>